<template>
    <view>
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
            <u-navbar
                :is-back="true"
                title="注册账号"
                :title-bold="true"
                :is-fixed="false"
                :border-bottom="false"
                :background="{ background: 'rgba(256,256, 256,0)' }"
            ></u-navbar>
        </u-sticky>
        <view class="register">
        <div style="text-align: center">
          <image class="logo" src="/static/logo/login_logo.png" mode="heightFix"></image>
        </div>

          <view class="input-container">
                <view class="input-item flex">
                    <u-input
                        v-model="mobile"
                        class="input"
                        placeholder="输入手机号码"
                        style="width: 100%"
                    />
                </view>
                <view class="input-item flex">
                    <u-input v-model="smsCode" style="width: 100%" placeholder="输入验证码" />
                    <button
                        class="bd-primary xs primary br60 flex row-center"
                        :class="{ disable: !mobile ||  mobile.length != 11 }"
                        hover-class="none"
                        @click="sendSmsFun"
                    >
                        <!-- 获取验证码 -->
                        <u-verification-code unique-key="register" ref="uCode" @change="codeChange">
                        </u-verification-code>
                        <view class="xs">{{ codeTips }}</view>
                    </button>
                </view>
                <view class="input-item flex">
                <u-input
                    v-model="password"
                    type="password"
                    style="flex: 1"
                    :password-icon="false"
                    placeholder="请输入密码"
                    :input-border="false"
                />
              </view>
                <view class="input-item flex">
                    <u-input
                        v-model="inviteCode"
                        placeholder="输入邀请人"
                        style="width: 100%"
                    />
                </view>
            </view>
          <view class="flex row-end m-t-30" style="margin-bottom: 30px;width: 100%;justify-content: space-between;font-size: 18px;color: #333">
<!--            <navigator  url="/pages/register/register" hover-class="none">手机号注册</navigator>-->
            <span></span>
            <navigator  url="/pages/login/login" hover-class="none">已有账号，去登录</navigator>
          </view>
            <view class="m-t-40 sm flex row-center" style="width: 100%;">
                <u-checkbox v-model="isAgreement" shape="circle" :active-color="colorConfig.primary">
                  <div class="flex text-xs" style="font-size: 14px;flex-wrap: wrap;margin-left: 15px;margin-right: -15px">
                        已阅读并同意
                      <router-link to="/bundle/pages/server_explan/server_explan?type=0">
                        <view class="primary">《福荟星球用户服务、授权协议》</view>
                      </router-link>
                      和
                      <router-link to="/bundle/pages/server_explan/server_explan?type=1">
                        <view class="primary">《个人信息及隐私保护政策》</view>
                      </router-link>
                    </div>
                </u-checkbox>
            </view>
            <view style="padding: 0 20px">
              <view
                  class="btn white bg-primary br60 flex row-center"
                  :class="{ disable: disable }"
                  @click="registerFun"
                  style="margin-top: 100rpx;margin-bottom: 0px;border-radius: 50rpx;height: 45px"
              >
                注册
              </view>
            </view>
            <router-link to="">
              <view style="padding: 0 20px">
                <view
                    class="btn white bg-primary bg-primary2 br60 flex row-center"
                    @click="registerFun"
                    style="margin-bottom: 50px;border-radius: 50rpx;height: 45px"
                >
                  下载APP
                </view>
              </view>
            </router-link>
            <!-- 阅读协议弹框 -->
            <u-modal
                :value="showModel"
                show-cancel-button
                :show-title="false"
                @confirm=";(isAgreement = true), (showModel = false)"
                @cancel="showModel = false"
                :confirm-color="colorConfig.primary"
            >
                <view class="comfirm-box">
                    <view> 请先阅读并同意 </view>
                    <view class="flex row-center">
                        <router-link
                            data-theme=""
                            to="/bundle/pages/server_explan/server_explan?type=0"
                        >
                            <view class="agreement">《服务协议》</view>
                        </router-link>
                        和
                        <router-link to="/bundle/pages/server_explan/server_explan?type=1">
                            <view class="agreement">《隐私协议》</view>
                        </router-link>
                    </view>
                </view>
            </u-modal>
        </view>
    </view>
</template>

<script>
import { register, sendSms } from '@/api/app.js'
import { ACCESS_TOKEN } from '@/config/app.js'
import { SMSType } from '@/utils/type.js'
import { mapMutations, mapGetters } from 'vuex'

export default {
    name: 'register',
    created() {},
    data() {
        return {
            isAgreement: false,
            mobile: '',
            inviteCode: '',
            smsCode: '',
            password: '',
            passwordConfirm: '',
            canSendSms: true,
            codeTips: '',
            showModel: false
        }
    },
    onLoad() {
        // console.log(this.appConfig)
    },
    methods: {
        ...mapMutations(['login']),
        codeChange(tip) {
            this.codeTips = tip
        },
        registerFun() {
            let { isAgreement, mobile, password, smsCode, passwordConfirm } = this

            if (mobile.length != 11) {
                this.$toast({ title: '请填写正确手机号' })
                return
            }
            if (!password) {
                this.$toast({ title: '请填写密码' })
                return
            }
            if (!isAgreement)
                // return this.$toast({
                //   title: '请先勾选"已阅读并同意《服务协议》和《隐私协议》"',
                // });
                return (this.showModel = true)
            let data = {
                mobile: mobile,
                code: smsCode,
                password: password,
                inviteCode: this.inviteCode,
                client: 2
            }
            uni.showLoading({
                title: '注册中...'
            })
            register(data).then((res) => {
                if (res.code == 1) {
                    this.login(data)
                    this.$toast({ title: res.msg })
                    //  跳转到登录页
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1000)
                }
            }).finally(() => {
                uni.hideLoading()
            })
        },

        countDownFinish() {
            this.canSendSms = true
        },

        sendSmsFun() {
            if (!this.$refs.uCode.canGetCode) return
            if (!this.mobile) {
                this.$toast({ title: '请填写手机号信息～' })
                return
            }
            sendSms({ mobile: this.mobile, key: SMSType.REGISTER }).then((res) => {
                if (res.code == 1) {
                    this.$toast({ title: res.msg })
                    this.$refs.uCode.start()
                }
            })
        }
    },
    computed: {
        ...mapGetters(['appConfig']),
        disable() {
            if (
                this.mobile && this.mobile.length == 11 && this.smsCode
            ) {
                return false
            } else {
                return true
            }
        }
    }
}
</script>

<style lang="scss">
page {
    background-color: #f4f4f4;
}
.register {
    padding: 80rpx 40rpx 0;

  .logo {
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 20rpx;
    margin-top: 20rpx;
    text-align: center;
  }
    .input-container {
        .input-item {
          padding: 0 30rpx;
          display: flex;
          align-items: center;
          height: 100rpx;
          width: 100%;
          margin-top: 30rpx;
          border-radius: 18rpx;
          background-color: #fff;
            .input-label {
                width: 180rpx;
                flex: none;
            }
            .bd-primary {
                height: 56rpx;
                width: 176rpx;
                flex: none;
                border: 1px solid $-color-primary;
                .seconds {
                    color: $-color-primary;
                }
            }
        }
    }
    .btn {
        width: 100%;
        height: 100rpx;
        background-color: $-color-primary;
        margin: 50rpx auto 0rpx;
        border-radius: 10rpx;
    }
    .text {
        font-weight: 500;
        font-size: 28px;
        text-align: left;
    }
    .comfirm-box {
        text-align: center;
        padding: 60rpx 0 70rpx 0;
    }
    .agreement {
        color: $-color-primary;
    }
    .disable {
        opacity: 0.5;
    }
}
</style>
